<template>
    <div class="form-data">
        <el-form ref="ruleForm" :model="form" label-width="100px" size="medium"  :rules="rules">
            <!--            prop 属性-->
            <el-form-item label="课程名称" prop="title">
                <el-input v-model="form.title" placeholder="请输入课程名称"></el-input>
            </el-form-item>
            <el-form-item label="课程等级" prop="level">
                <el-select v-model="form.level" placeholder="请选择课程等级">
                    <el-option label="初级" value="初级"></el-option>
                    <el-option label="中级" value="中级"></el-option>
                    <el-option label="高级" value="高级"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="报名人数" prop="count">
                <el-input v-model.number="form.count" placeholder="请输入报名人数" ></el-input>
            </el-form-item>
            <el-form-item label="上线时间" prop="date">
                <el-date-picker
                        v-model="form.date"
                        type="date"
                        placeholder="选择日期时间"
                        value-format="yyyy-MM-dd"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="技术栈" prop="type">
                <el-radio-group v-model="form.type">
                    <el-radio label="vue" name="type"></el-radio>
                    <el-radio label="react" name="type"></el-radio>
                    <el-radio label="node.js" name="type"></el-radio>
                    <el-radio label="小程序" name="type"></el-radio>
                    <el-radio label="angular" name="type"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-button @click="submitForm('ruleForm')" type="primary">创建课程</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Provide} from 'vue-property-decorator'

    @Component({
        components: {}
    })
    export default class FormData extends Vue {
        @Provide() form: {
            //存储的数据类型
            title: string,
            type: string,
            level: string,
            count: string,
            date: string
        } = {
            title: "",
            type: "",
            level: "",
            count: "",
            date: ""
        }
        // 表单验证
        @Provide() rules={
            title:[{required:true,message:'请输入课程名称',trigger: 'blur' }],
            type:[{required:true,message:'请输入课程类型',trigger: 'change' }],
            level:[{required:true,message:'请选择课程等级',trigger: 'blur' }],
            count:[{type:'number',required:true,message:'请输入正确的报名人数',trigger: 'blur' }],
            date:[
                {type:"string",required:true,message:'请选择上线时间',trigger: 'change' }
            ],
        }
        //提交表单
        submitForm(formName:string){
            (this as any).$refs[formName].validate((valid:boolean)=>{
                if(valid){
                    (this as any).$axios.post(`api/profiles/add`,this.form)
                        .then((res: any) => {
                            console.log(res.data);
                            this.$message({
                                message: res.data.msg,
                                type: "success"
                            });
                            this.resetForm(formName)
                        });
                }
            })

    }
        //重置表单
    resetForm(formName:string){
        (this as any).$refs[formName].resetFields();

    }
    }
</script>

<style lang="scss">
    .form-data {
        -webkit-border-radius: 5px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        background-clip: padding-box;
        padding: 35px;
        background: #fff;
        border: 1px solid #dcdfe6;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);

        .el-input,
        .el-select {
            width: 200px !important;
        }
        .division {
            margin: 0 10px;
            color: #606266;
        }
        .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
            content: '';
        }
        }
</style>
 
